<template>
  <el-form
    class="cc-query-form"
    label-width="0px"
    :model="formData"
    :inline="true"
    @submit.prevent
  >
    <el-form-item
      v-if="advanceQuery === '1'"
      prop="advanceQuery"
    >
      <el-input
        v-model="formData.advanceQuery"
        placeholder="可用&或|分隔关键字"
        @change="handleChange"
        title="全局查询，可用&或|分隔关键字"
        :clearable="true"
      />
    </el-form-item>
    <el-form-item
      v-for="item in props.fieldList || []"
      :key="item.name"
      :prop="item.id"
    >
      <component
        :is="item.type"
        v-bind="item"
        :prop="item.id"
        :showAll="true"
        :placeholder="item.placeholder"
        @change="handleChange"
        :clearable="true"
        :title="item.placeholder"
      />
    </el-form-item>
    <el-form-item
      v-if="(props.fieldList && props.fieldList.length > 0)
        || (props.buttonList && props.buttonList.length > 0)"
    >
      <el-button type="primary" @click="handleSearch">
        <cc-icon
          iconId="018dc9c3efe489a7d117"
          style="margin-right: 5px"
        />查询
      </el-button>
    </el-form-item>
    <span :class="buttonWrap === '1' ? 'cc-button-box-wrap' : ''">
      <el-form-item
        v-for="(button, index) in props.buttonList || []"
        :key="index"
      >
        <el-button
          class="cc-query-form-button"
          :style="{
            '--query-button-color': button.backgroundColor ? button.fontColor : 'white',
            '--query-button-background-color': button.backgroundColor ? '' : button.borderColor,
            'color': button.fontColor,
            'background-color': button.backgroundColor,
            'border': '1px solid ' + button.borderColor
          }"
          :disabled="button.disabled"
          :loading="button.loading === true"
          @click="buttonClick(button)"
        >
          <cc-icon
            :iconId="button.iconId"
            :color="button.fontColor"
            style="margin-right: 5px"
          />{{button.name}}
        </el-button>
      </el-form-item>
    </span>
  </el-form>
</template>

<script setup>
import { ref, provide, onMounted } from 'vue';
import { checkButtonShow } from '@/codeless/js/codeless';

const emit = defineEmits(['change', 'buttonClick']);
const props = defineProps({
  fieldList: Array,
  buttonList: Array,
  dataTableId: String,
  advanceQuery: String,
  buttonWrap: String,
});

const queryLoading = ref(false);
const formData = ref({});
provide('formData', formData);

const handleChange = () => {
  if (queryLoading.value) return;
  queryLoading.value = true;
  emit('change', formData.value);
  setTimeout(() => queryLoading.value = false, 300);
};

const handleSearch = () => {
  handleChange();
};

const validateButtons = (dataList, fieldList) => {
  props.buttonList.forEach(button => {
    if ((button.dataVolume === '单条' && (dataList == null || dataList.length !== 1))
        || (button.dataVolume === '多条' && (dataList == null || dataList.length === 0))) {
      button.disabled = true;
      return;
    }

    let show = true;
    for (const data of dataList) {
      if (!checkButtonShow(button, data, fieldList)) {
        show = false;
        break;
      }
    }
    button.disabled = !show;
  });
};

const buttonClick = (button) => {
  emit('buttonClick', button);
};

onMounted(() => {
  (props.fieldList || []).forEach(field => {
    formData.value[field.id] = field.defaultValue;
  });
  formData.value.advanceQueryTableId = props.dataTableId || '';
  validateButtons([]);
});

defineExpose({ validateButtons });
</script>

<style scoped>
:root {
  --query-button-color: '';
  --query-button-background-color: ''
}
.cc-query-form :deep(.el-input),
.cc-query-form :deep(.el-select) {
  width: 150px!important;
  text-align: left;
}
.cc-query-form :deep(.el-form-item) {
  margin-right: 10px!important;
  margin-bottom: 5px!important;
}
.cc-query-form-button.search {
  color: white;
  background-color: rgb(64, 158, 255);
  border: rgb(64, 158, 255);
}
.cc-query-form-button.is-disabled {
  background: #f3f3f3 !important;
  border-color: #c5c5c5 !important;
  box-shadow: none!important;
  color: rgba(0, 0, 0, .4)!important;
  text-shadow: none!important;
}
.cc-query-form-button:not(.is-disabled):hover {
  color: var(--query-button-color)!important;
  background-color: var(--query-button-background-color);
}
.cc-query-form-button:not(.is-disabled):focus-visible {
  outline: unset;
}
.cc-query-form-button:not(.is-disabled):active {
  filter: brightness(90%);
}
.cc-button-box-wrap {
  display: block!important;
}
</style>